---
import Icon from "./Icon.astro";

export interface Props {
  pageUrl: string;
  description: string;
}

const { pageUrl, description } = Astro.props;

const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`;
const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`;
const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`;
const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`;
---

<div
  class="absolute left-[-18px] top-[110px] h-full hidden"
  id="page-share-icons"
>
  <div class="flex sticky top-[100px] flex-col gap-1.5">
    <a
      href={twitterUrl}
      target="_blank"
      class="text-gray-500 hover:text-gray-700"
    >
      <Icon icon="twitter" />
    </a>
    <a href={fbUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
      <Icon icon="facebook" />
    </a>
    <a href={hnUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
      <Icon icon="hackernews" />
    </a>
    <a
      href={redditUrl}
      target="_blank"
      class="text-gray-500 hover:text-gray-700"
    >
      <Icon icon="reddit" />
    </a>
  </div>
</div>